<template>
  <el-form-item  v-bind="$attrs">
    <template slot="label">
      {{ label }}
      <el-tooltip :content="tip" :placement="tipPosition" :effect="tipEffect">
        <span :class="[icon]" />
      </el-tooltip>
    </template>
    <slot />
  </el-form-item>
</template>
<script>
export default {
  name: "TipFormItem",
  props: {
    label: {
      type: String
    },
    icon: {
      type: String,
      default: "el-icon-warning-outline"
    },
    tip: {
      type: String
    },
    tipPosition: {
      type: String
    },
    tipEffect: {
      type: String,
      default: "dark"
    }
  },
  // render() {
  //   const slotList = Object.entries(this.$slots)
  //   const scopeSlotList = Object.entries(this.$scopedSlots)
  //   return (
  //     <el-form-item {...{ attrs: this.$attrs }}>
  //       {slotList.map(item => <template slot={item[0]}>{item[1]}</template>)}
  //       {scopeSlotList.map(item => <template slot={item[0]} slot-scope={(a)=>item[1]}></template>)}
  //       <template slot="label">
  //         {this.label}
  //         <el-tooltip
  //           content={this.tip}
  //           placement={this.tipPosition}
  //           effect={this.tipEffect}
  //         >
  //           <span class={this.icon} />
  //         </el-tooltip>
  //       </template>
  //     </el-form-item>
  //   );
  // }
};
</script>

<style lang="scss" scoped>
.el-tooltip {
  color: grey;
  cursor: pointer;
}
.red {
  color: red;
}
</style>
